<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html>

<head>
  <title>Movie.com</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <!-- 引入样式 -->
  <!-- <link rel="stylesheet" href="lib/elementui/theme-chalk/index.css" type="text/css"> -->
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="./static/css/style.css">
  <link rel="stylesheet" href="./static/css/star.css">

  <style>
    body {
      margin: 0px;
      background-color: rgba(50, 50, 50, 0.9);
    }

    /* 所有 */
    #app {
      width: 100%;
    }

    .login {
      transition: 0.3s;

      position: absolute;
      right: 5%;
      width: 400px;
      top: 20%;
      background-color: white;
      border-radius: 5px;
      padding-right: 40px;
    }

    .login:hover {
      -moz-box-shadow: 0 0 500px rgb(47, 100, 192);
      box-shadow: 0 0 500px rgb(47, 100, 192);
      transition: all 0.3s;
      color: white;

    }

    .bg {
      position: absolute;
      left: 0;
      top: 5%;
    }
  </style>
</head>

<body>

  <script id="vertexShader" type="x-shader/x-vertex">
    varying vec2 v_uv;
  void main() {
    v_uv = uv;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.);
  }
  </script>
  <!-- FragmentShader code here -->
  <!-- // built from the tutorial https://www.youtube.com/watch?v=dhuigO4A7RY -->
  <script id="fragmentShader" type="x-shader/x-fragment">
  #define PI2 6.28318530718
  #define PI 3.1415926535897
  
  uniform vec2 u_mouse;
  uniform vec2 u_resolution;
  uniform float u_time;
  
  varying vec2 v_uv;
  
  mat2 r2(float a) {
      return mat2(cos(a), -sin(a), sin(a),cos(a));
  }
  
  float hash2( vec2 p) {
      p = fract(p*vec2(125.34, 456.21));
      p+= dot(p, p+45.32);
      return fract(p.x*p.y);
  }
  
  vec2 hash( vec2 p ) {
    p *= mat2( 127.1,-311.7,27.3,215.3 );
    return 2.*fract(sin(p)*43758.5453123) -1.;
  } 
  
  float star( vec2 p, float flare) {
  
      float d = length(p);
      // falloff for light
      float m = .01/d;
      
      float col = m;
      
      // light rays
      float rays = max(0.,.45 - abs(p.x*p.y*1000.));
      col += rays * flare;
      // rotate and do again
      p *= r2(PI/4.);
      rays = max(0.,.5 - abs(p.x*p.y*1000.));
      col += rays *.3 * flare;
    
      col *= smoothstep(.5,.2,d);
      return col;
      
  }
  
  vec3 star_layer(vec2 p) {
    vec3 col = vec3(0.);
    vec2 pg = fract(p)-.5;
    vec2 id = floor(p);
    for(int y=-1;y<=1;y++) {
      for(int x=-1;x<=1;x++) {
                  
        vec2 offset = vec2(x,y);
        float pid = hash2(id+offset);
        float size = fract(pid*345.32);
        float rn = fract(pid*645.32);
        //position
        vec2 pos = pg-offset-(vec2(pid,fract(pid*2.))-.5);
  
        float star = star(pos,smoothstep(.86,1.,size));
        // color stuff
        vec3 wv =  vec3(1., rn, rn)*sin(pid*943.321+u_time*.5)*PI;
        vec3 color = sin(wv)*1.5+1.5;
        star *= sin(u_time*2.5+pid*6.2831)*1.+1.5;
        // slap that math tother
        col+= star*size*color;
      }
    }
    return col;
  }
    
  void main() {
      // Adjust coords to center of the screen and 
      // corect pixel aspect ratio
      vec2 uv = (gl_FragCoord.xy-.5*u_resolution.xy)/u_resolution.y;
      vec2 ms = (u_mouse.xy-u_resolution.xy*.5)/u_resolution.y;
      uv *= .5;
      vec3 col = vec3(0.);
      uv *= r2(ms.x*.25);
  
      for(float i=0.; i<1.; i+=1./5.) {
          float depth = fract(i+u_time*.1);
          float scale = mix(20.,1.,depth);
          float fade = depth*smoothstep(1.,.9,depth);
          //uv +=ms;
      col += star_layer(uv*scale+(i*32.)+ms)*fade;
      }
      
      gl_FragColor = vec4(col,1.0);
  }
  </script>

  <script src="./static/js/three.min.js"></script>
  <script src="./static/js/script.js"></script>
  <canvas width="2048" height="908" style="width: 2048px; height: 908px;"></canvas>
  <!-- 引入组件库 -->
  <script type="text/javascript" src="lib/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.19.2/axios.js"></script>

  <div id="app">
    <div>
      <img class="bg" src="./static/imgs/logo2.png" alt="">
      <div class="login" style="">
        <h1 style="color: rgba(0,0,0,0.7); text-align: center;">Movie.com</h1>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="125px" class="demo-ruleForm">
          <el-form-item label="名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="联系电话:" prop="buyerPhone" required>
            <el-input minlength="11" maxlength="11" v-model="ruleForm.buyerPhone"></el-input>
          </el-form-item>
          <el-form-item label="真实姓名">
            <el-input v-model="ruleForm.realname"></el-input>
          </el-form-item>
          <el-form-item label="身份证号" prop="idcard">
            <el-input minlength="18" maxlength="18" v-model="ruleForm.idcard"></el-input>
          </el-form-item>
          <el-form-item label="邮箱:" prop="buyerEmail" required>
            <el-input v-model="ruleForm.buyerEmail"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getlogin">登陆</el-button>
            <el-button type="success" @click="regist('ruleForm')">注册</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
  <script type="text/javascript">
    new Vue({
      el: "#app",
      data() {
        
        var checkPhone = (rule, value, callback) => {
          const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/
          if (!value) {
            return callback(new Error('电话号码不能为空'))
          }
          setTimeout(() => {
            // Number.isInteger是es6验证数字是否为整数的方法,实际输入的数字总是识别成字符串
            // 所以在前面加了一个+实现隐式转换

            if (!Number.isInteger(+value)) {
              callback(new Error('请输入数字值'))
            } else {
              if (phoneReg.test(value)) {
                callback()
              } else {
                callback(new Error('电话号码格式不正确'))
              }
            }
          }, 100)
        };

        var checkEmail = (rule, value, callback) => {
          const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
          if (!value) {
            return callback(new Error('邮箱不能为空'))
          }
          setTimeout(() => {
            if (mailReg.test(value)) {
              callback()
            } else {
              callback(new Error('请输入正确的邮箱格式'))
            }
          }, 100)
        };
        return {
          ruleForm: {
            name: "",
            realname: "",
            buyerPhone: "",
            idcard: "",
            buyerEmail: "",
            password: ""
          },
          rules: {
            name: [
              { required: true, message: '请输入名称', trigger: 'blur' },
              { min: 3, max: 5, message: '长度在 3 到 8个字符', trigger: 'blur' }
            ],
            realname: [
              { required: true, message: '请输入名称', trigger: 'blur' },
              { min: 3, max: 5, message: '长度在 2到  3个字符', trigger: 'blur' }
            ],
            buyerPhone: [

              { validator: checkPhone, trigger: 'blur' }

            ],
            idcard: [
              { required: true, message: '请输入身份证号', trigger: 'blur' },
              { min: 18, max: 18, message: '长度在18个字符', trigger: 'blur' }
            ],
            buyerEmail: [
              { validator: checkEmail, trigger: 'blur' }
            ],
            password: [
              { required: true, message: '请输入密码', trigger: 'blur' },
              { min: 6, max: 22, message: '长度在 6 到 22 个字符', trigger: 'blur' }
            ],
          }
        }
      },
      methods: {
        checkPhone() {

        },
        getlogin() {
          window.location.href = "/login.jsp"

        },
        regist(ruleForm) {
          this.$refs[ruleForm].validate((ispass) => {
            console.log(ispass)
            if (ispass) {
              axios.post("/user/regUser", this.ruleForm).then(res => {
                console.log(res);
                let { result } = res.data;
                if (result == "ok") {
                  window.location.href = "/login.jsp"
                  this.$notify.success({
                    title: '注册成功',
                    message: '注册成功'
                  })
                } else {
                  this.$notify.error({
                    title: '注册失败',
                    message: '注册失败，用户存在或密码错误'
                  })
                }
              })
            }
          })
        }
      }
    });
  </script>



</body>

</html>